<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i>{{$route.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
            <div class="handle-box">
                <el-dialog title="订单查看" :visible.sync="dialogFormVisible">
                    <div>
                        <el-card class="card_class">
                            <!-- <div style="text-align:center">订单号 :{{order_info.order_code}}</div>
                            <div style="text-align:center">手机号 :{{order_info.order_code}}</div>
                            <div style="text-align:center">餐车定位ID :{{order_info.order_code}}</div>
                            <div style="text-align:center">座位号 :{{order_info.order_code}}</div>
                            <div style="text-align:center">下单时间 :{{order_info.order_code}}</div>
                            <div style="text-align:center">订单金额 :{{order_info.order_code}}</div> -->
                            <el-row>
                                <el-col :span="6">
                                    <div style="text-align:center">&nbsp</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">订单号:</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">{{order_info.order_code}}</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">&nbsp</div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <div style="text-align:center">&nbsp</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">手机号:</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">{{order_info.telephone}}</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">&nbsp</div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <div style="text-align:center">&nbsp</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">餐车定位ID:</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">{{order_info.dining_car_id}}</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">&nbsp</div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <div style="text-align:center">&nbsp</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">座位号:</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">{{order_info.seat_number}}</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">&nbsp</div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <div style="text-align:center">&nbsp</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">下单时间:</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">{{order_info.create_at| time}}</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">&nbsp</div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <div style="text-align:center">&nbsp</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">订单金额:</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">{{order_info.total_price+'元'}}</div>
                                </el-col>
                                <el-col :span="6">
                                    <div style="text-align:center">&nbsp</div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialogFormVisible=false">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
            <div>
                <el-table :data="order" border fit>
                    <el-table-column prop="order_code" label="订单号" align="center">
                    </el-table-column>
                    <el-table-column prop="telephone" label="手机号" align="center">
                    </el-table-column>
                    <el-table-column prop="dining_car_id" label="餐车定位ID" align="center">
                    </el-table-column>
                    <el-table-column prop="seat_number" label="座位号" align="center">
                    </el-table-column>
                    <el-table-column prop="create_at" :formatter="date_format" label="下单时间" align="center">
                    </el-table-column>
                    <el-table-column prop="total_price" :formatter="price_format" label="金额" align="center">
                    </el-table-column>
                    <el-table-column prop="order_state" :formatter="state_format" label="状态" align="center">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="info(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="block">
                <el-pagination @current-change="handleCurrentChange" :current-page="num" layout="total,  prev, pager, next, jumper" :total="totalElements">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { allOrder } from '../../api/server.js'
import { time_format } from '../../utils/date.js'
export default {
    data() {
        return {
            order: [],
            order_info: {},
            num: 1,
            totalElements: 10,
            dialogFormVisible: false
        }
    },
    created() {
        this.getAllOrder(1, 10)
    },
    filters: {
        time(val) {
            return time_format(val, 'yyyy-MM-dd hh:mm:ss')

        },
    },
    methods: {
        addMenu() {
            this.$router.push({
                path: '/menuAdd'
            })
        },
        handleCurrentChange(val) {
            this.num = val
            this.getAllOrder(val, 10)
        },
        getAllOrder(page, pageSize) {
            allOrder({ page, pageSize })
                .then(res => {
                    this.order = res.result
                    this.totalElements = res.resultNum
                })
        },
        price_format(row) {
            return row.total_price + '元'
        },
        state_format(row) {
            switch (row.order_state) {
                case "100": return '订单提交'
                case "200": return '支付完成'
                case "300": return '订单完成'
            }
        },
        date_format(row) {
            return time_format(row.create_at, 'yyyy-MM-dd hh:mm:ss')
        },

        info(row) {
            this.dialogFormVisible = true
            this.order_info = row
        }
    }
}

</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 1%;
  .search {
    width: 30%;
  }
}

.block {
  text-align: center;
  margin-top: 1%;
}
.card_class {
  position: relative;
}
</style>